<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    </style>
</head>

<body>
    <div id="app">
        <p>
            <input type="text" v-focus>
        </p>
        <p>
            <input type="text"  >
        </p>
        <p>
            <input type="text" >
        </p>
        <img v-mybind:src="img"  style="width: 100px;height: 100px;">
        <input type="button" value="修改图片" @click="changeImg">
    </div>
</body>

</html>
<script src="./js/vue2.js"></script>
<script>


    // 全局定义指令
    Vue.directive("focus", {
        // inserted：指令所在的dom元素插入到父节点时调用，此时我们可以认为dom渲染完毕。
        inserted: function (el,binding) {
            console.log("inserted");
            // el:就是指令所在的dom元素。
            el.focus();
        },
        // bind：指令绑定到dom元素时，调用。此时dom还没有渲染。
        bind: function (el,binding) {
            console.log("bind");
        },
        update: function (el,binding) {
            console.log("update");
        }
    });


    // 
    // Vue.directive("mybind",{
    //     bind(el,binding){
    //         // el: dom元素
    //         // binding：是个对象，包括哪些属性：
    //         //           arg：指令的参数。
    //         //           value：指令的绑定值。赋给指令的值。
    //         el[binding.arg] = binding.value;
    //     },
    //     inserted(el,binding){

    //     },
    //     // 当指令使用的数据发生变化时，调用
    //     update:function(el,binding){
    //         el[binding.arg] = binding.value;
    //     }
    // })

    // 简写：以下写法相当于 bind + update
    Vue.directive("mybind",function(el,binding){
        el[binding.arg] = binding.value;
    })

    let vm = new Vue({
        el: "#app",
        data: {
            img:"./imgs/1.jpg"
        },
        methods:{
            changeImg(){
                this.img = "./imgs/b01.jpg"
            }
        }

    });







</script>